<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>

<div id="vue_det">
<h1>site:{{site}}</h1>
<h1>url:{{url}}</h1>
<h1>{{details()}}</h1>
</div>
<div id="vue_det2">
<h1>site:{{site}}</h1>
<h1>url:{{url}}</h1>
<h1>alexa:{{alexa}}</h1>
</div>
</body>
<script>
new Vue({

	el:"#app",
	data:{

		message:"fuckYou"
	}
})

var vm =new Vue({
	el:"#vue_det",
	data:{
		site:"草泥马",
		url:"www.baidu.com",
		alexa:"88888"
	},
	methods:{
		details:function(){
		return this.site+"学你麻痹";
		}
	}
})
var data = {site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm2=new Vue({
	el:"#vue_det2",
	data:data
})
//它们引用相同的对象！
document.write(vm2.site===data.site)
document.write("<br>")
//设置属性也会影响原始数据
vm2.site="卧槽"
document.write(data.site + "<br>")
data.alexa = 1234

document.write(vm2.$data === data) // true
document.write("<br>") // true
document.write(vm.$el === document.getElementById('vue_det'))
</script>
</html>